﻿<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" :top="queryHeight + 12">
        <template #left>
            <l-panel style="padding-right:0;" >
                <template #title>
                    {{$t('接口分类')}}
                    <div class="tree-setting-btn" >
                        <el-tooltip effect="dark" :content="$t('新增分类')" placement="top">
                            <el-button @click="handleSettingClick" type="text" icon="el-icon-circle-plus-outline"></el-button>
                        </el-tooltip>
                    </div>
                </template>
                <el-tree 
                    class="learun-tree"
                    ref="tree" 
                    node-key="f_Id" 
                    :highlight-current="true"
                    v-loading="treeLoading" 
                    :data="tableShowData" 
                    :expand-on-click-node="false"  
                    @node-click="handleNodeClick">
                    <span class="lr-tree-node"  slot-scope="{node}">
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>

        <l-panel style="padding-left:0;" >
            <template #toolLeft >
                <l-query2 :items="queryItems" :height.sync="queryHeight" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                    <template #f_Code >
                        <el-input v-model="queryData.f_Code" :placeholder="$t('请输入')" />
                    </template>
                    <template #f_Name >
                        <el-input v-model="queryData.f_Name" :placeholder="$t('请输入')" />
                    </template>
                    <template #f_Address >
                        <el-input v-model="queryData.f_Address" :placeholder="$t('请输入')" />
                    </template>
                    <template #f_RequestMethod >
                        <l-select :options="f_RequestMethodOptions" v-model="queryData.f_RequestMethod" />
                    </template>
                </l-query2>
            </template>
            <template #toolRight >
                <l-tool-btns :hasTableSetting="true" @setting="lr_handleSettingTable" :hasAdd="false" >
                    <l-excel-btns></l-excel-btns>
                    <el-button v-if="lr_hasPageAuth('Add','buttons')" type="primary" size="mini" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
                </l-tool-btns>
            </template>
            <l-table 
                ref="mainTable" 
                :loading="tableLoading" 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage"
                >
                <template v-for="(col,index) in lr_tableColumnsByToLabel(lr_getPageColumns(columns))" v-slot:[col.prop]="scope" >
                    <l-value-to-label
                    :value="scope.row[col.prop]"
                    :type="col.dataType"
                    :code="col.dataCode"
                    :valueKey="col.valueKey"
                    :labelKey="col.labelKey"
                    :options="col.options"
                    :format="col.format"
                    :setting="col.setting"
                    :key="index" ></l-value-to-label>
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <!--表单-->
        <l-dialog :title="$t(formTitle)"
                  :visible.sync="formVisible"
                  :height="700"
                  :width="900"
                  @ok="handleSave"
                  @close="handleCloseForm"
                  @opened="handleOpenedForm">
            <my-form ref="form" v-if="formVisible"></my-form>
        </l-dialog>

        <!-- 分类管理表单 -->
        <l-dialog :title="$t(formTitle)"
                  :visible.sync="typeFormVisible"
                  :height="500"
                  :width="600"
                  @ok="handleTypeSave"
                  @close="handleCloseTypeForm">
            <TypeForm ref="typeform" v-if="typeFormVisible"></TypeForm>
        </l-dialog>

        <!-- 接口测试 -->
        <l-dialog 
            :title="`${$t('请求接口')}-【${name}】`"
            :visible.sync="sendVisible"
            :hasBtns="false"
            :height="600"
            :width="900"
            @close="handleCloseSendForm"
            @opened="handleOpenedSendForm"
            >
            <SendForm ref="sendForm" :sendformEditRow="sendformEditRow" v-if="sendVisible"></SendForm>
        </l-dialog>

        <!-- 接口权限 -->
        <l-dialog 
            :title="`${$t('接口权限设置')}-【${name}】`"
            :visible.sync="authFormVisible"
            :height="600"
            :width="900"
            @ok="handleAuthSave"
            @close="handleCloseAuthForm"
            @opened="handleOpenedAuthForm"
            >
            <AuthForm ref="authForm" v-if="authFormVisible" :authFormEditRow="authFormEditRow"></AuthForm>
        </l-dialog>
        
    </l-layout>
</template>

<script>
    import MyForm from './form'
    import SendForm from './sendForm'
    import TypeForm from '../apitype/form'
    import AuthForm from './authform'
    const api = window.$api.apimanage.apimaintain
    const apiType = window.$api.apimanage.apitype

    export default {
        components: {
            MyForm,
            TypeForm,
            SendForm,
            AuthForm
        },
        data() {
            return {
                lr_isPage: true,
                moduleCode: 'apiManage_apimaintain',
                
                // 查询参数
                queryHeight:44,
                queryData:{
                    f_Code:'',
                    f_Name:'',
                    f_Address:'',
                    f_Type:'',
                    f_RequestMethod:'',
                },

                queryItems:[
                    {label:'接口编码',prop:'f_Code'},
                    {label:'接口名称',prop:'f_Name'},
                    {label:'接口地址',prop:'f_Address'},
                    {label:'请求方式',prop:'f_RequestMethod'},
                ],

                // 表格参数
                tableLoading: false,
                tableData:[],
                tableTotal:0,
                tableCurrentPage:1,
                tablePageSize:50,
                columns: [
                    {label:'接口编码',prop:'f_Code',minWidth:80,align:'left',dataType:'input',isNotAutoWrap:true},
                    {label:'接口名称',prop:'f_Name',minWidth:130,align:'left',dataType:'input',isNotAutoWrap:true},
                    {label:'接口地址',prop:'f_Address',minWidth:200,align:'left',dataType:'input',isNotAutoWrap:true},
                    {label:'接口类别',prop:'f_Type',minWidth:80,align:'left',dataType:'input'},
                    {label:'请求方式',prop:'f_RequestMethod',minWidth:70,align:'left',dataType:'dataItem',dataCode:'RequestMethod'},
                    {label:'接口状态',prop:'f_EnabledMark',minWidth:100,align:'left',dataType:'switch',setting:{"width":40,"activeIconClass":"","inactiveIconClass":"","activeText":"启用","inactiveText":"禁用","valueType":"number","activeValue":"0","inactiveValue":"1","activeColor":"rgba(144, 238, 144, 1)","inactiveColor":"#C0CCDA","csType":"int","required":true}},
                    {label:'备注',prop:'f_Description',minWidth:150,align:'left',dataType:'textarea',isNotAutoWrap:true},
                ],
                tableBtns:[
                    {prop:'Edit',label:'编辑'},
                    {prop:'SendData',label:'接口测试',width:60},
                    {prop:'AuthManage',label:'权限设置',width:60},
                    {prop:'Delete',label:'删除'},
                ],

                // 表单参数
                formVisible:false,
                formTitle:'',
                formEditRow:null,
                formEdit:false,

                //接口类别下拉框
                TypeOptions:[],

                // 接口分类参数
                typeFormVisible:false,
                typeFormTitle:'',
                typeFormEditRow:null,
                typeFormEdit:false,
                treeLoading:false,

                //接口请求
                sendVisible:false,
                sendformEditRow:null,
                code:'',
                name:'',

                // 接口权限设置
                authFormVisible:false,
                authFormTitle:'',
                authFormEditRow:null,
                authFormEdit:false,
                authLoading:false,

            }
        },
        computed: {
            f_RequestMethodOptions(){
                return this.lr_dataItemOptions(this.lr_dataItem['RequestMethod'])
            },
            tableShowData(){
                if(this.TypeOptions){
                    return  this.$toTree(this.TypeOptions,"f_Id","f_PId","f_Id","f_Name")
                }
                else{
                    return  this.TypeOptions
                }
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.loadTableData()
                this.lr_loadDataItem('RequestMethod')
                this.getTypeList()
            },
            async getTypeList(){
                let queryData = {}
                this.TypeOptions=await this.$awaitWraper(apiType.getList(queryData))
            },
            handleSearch(){
                this.loadTableData()
            },
            turnTablePage({rows}){
                this.tablePageSize = rows
                this.loadTableData(true)
            },
            async loadTableData(isNotFirst){
                if(!isNotFirst){
                    this.tableCurrentPage = 1
                }
                this.tableLoading = true
                let queryData = this.$deepClone(this.queryData)
                
                queryData.rows = this.tablePageSize
                queryData.page = this.tableCurrentPage
                queryData.sidx = 'F_Id'
                let data = await this.$awaitWraper(api.getPage(queryData))
                if(data != null){
                    this.tableData = data.rows
                    this.tableTotal = data.records
                }
                else{
                    this.tableData = []
                }
                this.tableLoading = false
            },

            handleAdd(){
                this.formEdit = false
                this.handleShowForm()
            },
            handleEdit($index,row){
                this.formEdit = true
                this.formEditRow = row
                this.handleShowForm()
            },
            handleDelete($index,row){
                this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
                }).then(async () => {
                    this.tableData.splice($index,1);
                    this.tableTotal--
                    await api.remove(row.f_Id)
                    this.$message({
                        type: 'success',
                        message: this.$t('删除成功!')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$t('已取消删除!')
                    })
                })
            },

            async handleSave(showLoading, hideLoading) {
                showLoading('保存数据中...')
                if (await this.$refs.form.validateForm()) {
                    const res = await this.$refs.form.saveForm({ keyValue: this.formEdit? this.formEditRow.f_Id :'', isEdit: this.formEdit })
                    if (res) {
                        const msg = this.formEdit ? '更新成功!' : '新增成功!'
                        this.$message({
                            type: 'success',
                            message: this.$t(msg)
                        })
                        this.loadTableData()
                        this.formVisible = false
                    }
                }
                hideLoading()
            },

            handleShowForm(text) {
                this.formTitle = text
                this.formVisible = true
            },
            async handleOpenedForm(showLoading, hideLoading) {
                if (this.formEdit) {
                    showLoading('加载数据中...')
                    await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id })
                    hideLoading()
                }
            },
            handleCloseForm() {
                this.formVisible=false
                this.$refs.form.resetForm()
            },
            //分类管理
            handleSettingClick(text){
                this.typeFormTitle = text
                this.typeFormVisible = true
            },
            async handleTypeSave(showLoading, hideLoading) {
                showLoading('保存数据中...')
                if (await this.$refs.typeform.validateForm()) {
                    const res = await this.$refs.typeform.saveForm({ keyValue: this.formEdit? this.formEditRow.f_Id :'', isEdit: this.formEdit })
                    if (res) {
                        const msg = this.formEdit ? '更新成功!' : '新增成功!'
                        this.$message({
                            type: 'success',
                            message: this.$t(msg)
                        })
                        this.loadTableData()
                        this.typeFormVisible = false
                    }
                }
                hideLoading()
                this.getTypeList()
            },
            handleCloseTypeForm() {
                this.typeFormVisible=false
                this.$refs.typeform.resetForm()
            },
            handleNodeClick(node){
                this.queryData.f_Type=node.f_Name
                this.tableCurrentPage = 1
                this.loadTableData()
            },
            //接口测试
            handleSendData($index,row){
                this.sendVisible = true
                this.name =  row.f_Name
                this.sendformEditRow = row
            },
            handleCloseSendForm(){
                this.sendVisible=false
                // this.$refs.form.resetForm()
            },
            handleOpenedSendForm(){
                this.$refs.sendForm.loadFormData({ keyValue: this.sendformEditRow.f_Id })
            },
            //接口权限设置
            handleAuthManage($index,row){
                this.authFormVisible = true
                this.name =  row.f_Name
                this.authFormEditRow = row
            },
            handleCloseAuthForm(){
                this.authFormVisible=false
                this.$refs.authForm.resetForm()
            },
            handleOpenedAuthForm(){
                this.$refs.authForm.loadFormData({ maintainid: this.authFormEditRow.f_Id })
            },
            async handleAuthSave(showLoading, hideLoading) {
                showLoading('保存数据中...')
                if (await this.$refs.authForm.validateForm()) {
                    const res = await this.$refs.authForm.saveForm()
                    if (res) {
                        this.$message({
                            type: 'success',
                            message: "提交成功"
                        })
                        this.loadTableData()
                        this.authFormVisible = false
                    }
                }
                hideLoading()
            },

        }
    }
</script>
